<template>
  <div>
    <ul class="list">
      <li class="item"
          v-for="(item,index) of letters"
          :key="item"
          @click="handleLetterClick"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
          :ref="item"
      >{{item}}</li>
    </ul>
  </div>
</template>

<script>
    export default {
        props:{
          cities:Object,
        },
        name: "AlphaBet",
        data(){
          return{
              touchStatus: false,
              startY:0,
              timer:null
          }
        },
        mounted(){
          // []
          // console.log(this.letters);

        },
        created(){
          // 获取到值
          // setTimeout(()=>{
          //   console.log(this.letters);
          // },0)

          // []
          // this.$nextTick(()=>{
          //   console.log(this.letters);
          // })
        },
        // 与dom绑定的data发生变化，则调用。1.data改变 2.dom有绑定数据 3.dom绑定的数据正好是改变的data,满足三个条件，updated钩子调用一次
        updated(){
          // 因为cities是异步从服务器获取的，因此当前的dom渲染和数据初始化都与cities的数据加载是异步的，因此mounted钩子和created钩子都取不到cities
          // 而当cities从服务器传入时，letters由于是cities的一个计算属性，是随着cities的变化响应变化的，那么cities传入时，letter改变，dom也随之更新，这时updated钩子被调用，因此只有在updated钩子里才能取到this.$refs['A']

          // console.log(this.letters);
          // 获取A元素距离父级顶部的高度
              this.startY = this.$refs['A'][0].offsetTop+79
        },
        computed:{
          letters(){
            const letters = [];
            for(let i in this.cities){
              letters.push(i)
            }
            // 注意computed是定义一个属性，所以一定要有return
            return letters;
          }
        },
        methods:{
          handleLetterClick(e){
                this.$emit("letterChange",e.target.innerHTML);
          },
          // 按下
          handleTouchStart(){
              this.touchStatus = true
          },
          // 鼠标移动
          handleTouchMove(e){
              if(this.touchStatus){

                // 截流，当发生滑动事件时，在16ms以后去执行，那么16ms之内再次触发滑动事件，上次的事件被清除，本次事件在下一个16ms后发生
                // 这样，就使得16ms只触发一次事件，大量的减少了事件的触发频率，16ms即自己定义的一个频率。
                if(this.timer){
                  clearTimeout(this.timer);
                }
                this.timer = setTimeout(()=>{
                  // 这里的e.target获取的总是鼠标或手指点击下去对应的那个dom
                  // console.log(e.target)

                  // touches获取的是一个鼠标或手指点击下去的dom元素信息、此时手指和鼠标位置信息(clientY,距离屏幕最顶部的距离)、它的父级属性，这里只要鼠标距离顶部的位置信息
                  const touchY = e.touches[0].clientY
                  // 向下取整，当还没滑动到下一个字母时，还是算前一个字母对应的区块
                  const index = Math.floor((touchY-this.startY)/25)
                  if(index >= 0 && index <= this.letters.length){
                    this.$emit('letterScroll',this.letters[index]);
                  }
                },16)

              }
          },
          // 松开
          handleTouchEnd(){
              this.touchStatus = false

          }
        }
    }
</script>

<style lang="stylus" scoped>
  .list
    line-height 0.5rem
    width:4%
    position absolute
    top 1.54rem
    display flex
    flex-direction column
    justify-content center
    right 0
    bottom 0
  .list .item
    text-align: center
</style>
